<template>
  <!-- 账号资料 -->
  <div>
    <el-form class="account">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="企业名称">{{uMsg.companyName}}</el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="企业邮箱">{{uMsg.eMail}}</el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="工商执照">
            <img
              :src="uMsg.bizLicense"
              class="bizLicense"
              v-showImgArr="{list:[uMsg.bizLicense],ind:0}"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="企业联系人">{{uMsg.contacts}}</el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="手机号">{{uMsg.phone}}</el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="证件号">{{uMsg.idCard}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="account">
      <div>
        <span class="bank_tit">收款信息</span>
        <el-button v-if="canedit==false" @click="canedit=true">编辑</el-button>
        <el-button v-else type="primary" @click="saveBank">保存</el-button>
      </div>
      <el-form class="bank" label-width="auto">
        <el-row>
          <el-col :md="12" :sm="24">
            <el-form-item label="开户户名" required>
              <span v-if="!canedit">{{bankSet.userName}}</span>
              <el-input v-else v-model="bankSet.userName" placeholder="请输入内容" class="ipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24">
            <el-form-item label="开户银行" required>
              <span v-if="!canedit">{{bankSet.bank}}</span>
              <el-select v-else v-model="bankSet.bank" placeholder="请选择" class="ipt">
                <el-option label="中国建设银行" value="中国建设银行"></el-option>
                <el-option label="中国工商银行" value="中国工商银行"></el-option>
                <el-option label="中国农业银行" value="中国农业银行"></el-option>
                <el-option label="中国银行" value="中国银行"></el-option>
                <el-option label="中国交通银行" value="中国交通银行"></el-option>
                <el-option label="中国民生银行" value="中国民生银行"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24">
            <el-form-item label="开户支行" required>
              <span v-if="!canedit">{{bankSet.branchBank}}</span>
              <el-input v-else v-model="bankSet.branchBank" placeholder="请输入开户支行" class="ipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24">
            <el-form-item label="收款账号" required>
              <span v-if="!canedit">{{bankSet.account}}</span>
              <el-input v-else v-model="bankSet.account" placeholder="请输入收款账号" class="ipt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import bankCard from "../../../assets/bank";
export default {
  data() {
    return {
      uMsg: {},
      canedit: false,
      bankSet: {
        userName: "",
        bank: "",
        branchBank: "",
        account: "",
      },
    };
  },
  methods: {
    getMe() {
      this.$axios
        .post("/org/client/getCompanyById", { id: this.$orgId })
        .then((res) => {
          let rr = res.data.data;
          this.uMsg = rr;
        });
    },
    saveBank() {
      if (!this.bankSet.userName) {
        this.$message.error("请输入开户人姓名");
        return false;
      }
      if (!this.bankSet.bank) {
        this.$message.error("请输入开户银行");
        return false;
      }
      if (!this.bankSet.branchBank) {
        this.$message.error("请输入开户支行");
        return false;
      }
      if (!this.bankSet.account) {
        this.$message.error("请输入收款账号");
        return false;
      }
      let tt = bankCard(this.bankSet.account);
      if (!tt) {
        this.$message.error("请输入有效卡号");
        return false;
      } else {
        if (tt.bankName != this.bankSet.bank) {
          this.$message.error(
            `该卡号类型为 ${tt.bankName} 请输入与开户银行类型一致的卡号`
          );
          return false;
        }
      }
      this.bankSet.orgId = this.$orgId;
      this.$axios.post("/org/account/put", this.bankSet).then((res) => {
        this.canedit = false;
        this.getBank();
      });
    },
    getBank() {
      this.$axios.get("/org/account/get?orgId=" + this.$orgId).then((res) => {
        let rr = res.data.data;
        if (rr) this.bankSet = rr;
      });
    },
  },
  created() {
    this.getMe();
    this.getBank();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.account {
  width: 95%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.bizLicense {
  width: 100px;
  cursor: pointer;
}
.bank {
  margin-top: 15px;
}
.ipt {
  width: 80%;
  /* float: left; */
}
.bank_tit {
  float: left;
  margin-right: 15px;
  line-height: 42px;
}
</style>